<template>
  <div class="page-container">
    <!-- 面包屑部分 -->
    <div class="breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>营销中心</el-breadcrumb-item>
        <el-breadcrumb-item>红包</el-breadcrumb-item>
        <el-breadcrumb-item>红包统计</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="toolbar">
        <el-form :inline="true" :model="filters" :size="size" ref="filters">
            <el-row class="search-input">
                <el-row class="times" style="margin-right: 30px;">
                    <el-form-item label="活动时间：" prop="startTime">
                    <el-date-picker
                        v-model="filters.startTime"
                        type="datetime"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        format="yyyy-MM-dd HH:mm:ss"
                        placeholder="开始时间"
                        class="input_postion"
                        clearable
                        @change="changeStartDate"
                        :picker-options="startDateDisabled"
                    ></el-date-picker>
                    </el-form-item>
                    <span class="times-to">-</span>
                    <el-form-item prop="endTime">
                    <el-date-picker
                        v-model="filters.endTime"
                        type="datetime"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        format="yyyy-MM-dd HH:mm:ss"
                        placeholder="结束时间"
                        class="input_postion"
                        clearable
                        @change="changeEndDate"
                        :picker-options="endDateDisabled"
                        ></el-date-picker>
                    </el-form-item>
                </el-row>
                <el-form-item prop="promotionId" label="活动ID：">
                    <el-input clearable v-model="filters.promotionId" placeholder="活动ID" maxlength="80"></el-input>
                </el-form-item>
                <el-form-item prop="promName" label="活动名称：">
                    <el-input clearable v-model="filters.promName" placeholder="活动名称" maxlength="80"></el-input>
                </el-form-item>
            </el-row>
            <el-row class="search-button-noborder">
                <el-form-item>
                    <kt-button :label="$t('action.reset')" class="resetButton" icon="el-icon-refresh" @click="resetForm('filters')" />
                </el-form-item>
                <el-form-item>
                    <kt-button icon="el-icon-search" label="搜索" class="searchButton" @click="findCoupon"/>
                </el-form-item>
                
            </el-row>
        </el-form>
    </div>

    <!-- 统计图 -->
    <div class="common-wrap">
        <div v-for="(item,index) in chartData" :key="index" class="common-container">
            <p class="title">{{item.promName}}</p>
            <ve-pie :data="item" :settings="chartSettings" :extend="chartExtend"></ve-pie>
        </div>
    </div>

    <!-- 分页 -->
    <div v-if="chartData.length > 0" class="pagination-wrap">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="filters.start"
            :page-sizes="[9]"
            :page-size="filters.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="listTotal">
        </el-pagination>
    </div>

  </div>
</template>

<script>
import { formatDate } from "@/utils/datetime";
import KtButton from "@/views/Core/KtButton";
import VCharts from 'v-charts';
export default {
    components:{
        KtButton
    },
    data(){
        // 设置统计图颜色
        this.chartExtend = {
            color: ["#879FFF", "#FF9F8B", "#99D956"]
        }

        return{
            listTotal: 0,
            filters:{
                promType: 12,
                start : 1,
                limit: 9,
                promName:null,
                promotionId: null,
                time: null,
                startTime: "",
                endTime: "",
            },
            size: "mini",
            time: '',
            chartSettings: { type: 'pie' },
            chartData: [],
            startDateDisabled: {},//开始时间限制
            endDateDisabled: {},//结束时间限制
        }
    },
    methods:{
        changeStartDate: function() {
            var this_ = this;
            this_.endDateDisabled = {
                disabledDate: time => {
                    if (this_.filters.startTime) {
                        return time.getTime() <= new Date(this_.filters.startTime).getTime();
                    }
                }
            };
        },
        changeEndDate: function() {
            var this_ = this;
            this_.startDateDisabled = {
                disabledDate: time => {
                    if (this_.filters.endTime) {
                        return time.getTime() >= new Date(this_.filters.endTime).getTime();
                    }
                }
            };
        },
        handleSizeChange(val){

        },
        /**
         * 换页刷新
         */
        handleCurrentChange(val){
            this.$set(this.filters,"start",val);
            this.findCoupon();
        },
        findCoupon(){
            this.utils.request.couponQueryCount(this.filters,res=>{
                 
                if(res.data.rows == null || res.data.rows.length < 1){
                    // this.$message({"type":"warning","message":"查询暂无数据"})
                    this.listTotal = 0;
                    this.chartData = [];
                }else{
                    this.listTotal = res.data.total;
                    this.chartData = res.data.rows;
                }
            })
        },
        selectTime(val){
             
            this.filters.startTime = formatDate(val[0],"yyyy-MM-dd hh:mm:ss")
            this.filters.endTime = formatDate(val[1],"yyyy-MM-dd hh:mm:ss")
             
        },
        resetForm(formName) {
            //需要校验的keys
            let keys = ["promotionId","promName","time"]
            //调用校验
            let  boo = this.seachTableUtils.checkFromIsNull(this.filters,keys)
            if(!boo){
                return;
            }

            if (this.$refs[formName] != undefined) {
                this.$refs[formName].resetFields();
                this.filters.start = 1;
                this.filters.time = "";
                this.filters.startTime = null;
                this.filters.endTime = null;
                this.findCoupon();
            }
        },

    },
    mounted(){
        this.findCoupon();
    }
}
</script>

<style scoped lang="scss">
    .common-wrap {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
    }
    .title {
        margin: 30px auto;
        font-size: 18px;
    }
    /* 统计表格样式部分 */ 
      .common-container {
        width: 32%;
        padding: 20px;
        box-sizing: border-box;
        background-color: #fff;
        box-shadow:-2px 1px 10px 0px rgba(0,0,0,0.3);
        height: 450px;
        margin-top: 20px;
    }
    /* 分页样式优化 */ 
    .pagination-wrap {
        margin-top: 40px;
        text-align: right;
    }
</style>